/**
 * @description 全局样式
 */

@import './loading.scss';
@import './normalize.scss';
@import './transition.scss';
@mixin base-scrollbar {
    &::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    &::-webkit-scrollbar-thumb {
        background-color: rgba($base-menu-background, 0.1);
        border: 3px solid transparent;
        border-radius: 7px;
    }
    &::-webkit-scrollbar-thumb:hover {
        background-color: rgba($base-menu-background, 0.2);
    }
}

.vab-layout-header,
[class*='-bar-container'] {
    transition: $base-transition;
    * {
        transition: $base-transition;
    }
}

html {
    body,
    body[class*='vab-theme-'] {
        position: relative;
        box-sizing: border-box;
        height: 100vh;
        padding: 0;
        overflow: hidden;
        font-family: 'PingFang SC', Arial, 'Microsoft YaHei', sans-serif;
        font-size: $base-font-size-default;
        color: $base-color-black;
        background: $base-color-background;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        #app {
            height: 100vh;
            overflow: auto;
            @include base-scrollbar;
            .vab-main {
                transition: $base-transition;
                .vab-app-main {
                    width: 100%;
                    padding: $base-padding;
                    overflow: hidden;
                    transition: $base-transition;
                    >section {
                        background: $base-color-white;
                        transition: $base-transition;
                        >[class*='-container'] {
                            min-height: $base-keep-alive-height;
                            padding: $base-padding;
                            background: $base-color-white;
                            transition: $base-transition;
                        }
                    }
                }
            }
        }
        .upload_img,.uploadCard{
          .el-upload-list__item {
            transition: none !important;
          }
        }
        .ql-snow .ql-tooltip[data-mode="link"]::before {
          content: "请输入链接地址:";
        }
        .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
          border-right: 0px;
          content: "保存";
          padding-right: 0px;
        }

        .ql-snow .ql-tooltip[data-mode="video"]::before {
          content: "请输入视频地址:";
        }
        .ql-snow .ql-picker.ql-size,.ql-snow .ql-picker.ql-header{
          width: 80px;
        }
        .ql-snow .ql-picker.ql-font{
          //width: 90px;
        }
        .ql-snow .ql-picker.ql-size .ql-picker-label::before,
        .ql-snow .ql-picker.ql-size .ql-picker-item::before {
          content: "14px";
        }
        .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
        .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
          content: "10px";
        }
        .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
        .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
          content: "18px";
        }
        .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
        .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
          content: "32px";
        }

        .ql-snow .ql-picker.ql-header .ql-picker-label::before,
        .ql-snow .ql-picker.ql-header .ql-picker-item::before {
          content: "文本";
        }
        .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
        .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
          content: "标题1";
        }
        .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
        .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
          content: "标题2";
        }
        .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
        .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
          content: "标题3";
        }
        .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
        .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
          content: "标题4";
        }
        .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
        .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
          content: "标题5";
        }
        .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
        .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
          content: "标题6";
        }

        .ql-snow .ql-picker.ql-font .ql-picker-label::before,
        .ql-snow .ql-picker.ql-font .ql-picker-item::before {
          content: "标准字体";
        }
        .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
        .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
          content: "衬线字体";
        }
        .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
        .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
          content: "等宽字体";
        }
        .el-select-group__title{
          color: rgba(0, 0, 0, 0.35);
        }
        .titbox {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 46px;
        }
        .baseInfo {
            .el-table__header-wrapper {
                display: none;
            }
            .el-table__body-wrapper {
                .el-table__body {
                    tr {
                        td {
                            .cell {
                                .grey {
                                    color: #cfcfcf;
                                }
                            }
                        }
                        td:first-child,
                        td:nth-child(3) {
                            background: #F5F7FA;
                            .cell {
                                color: #333;
                            }
                        }
                        &.el-table__row:last-child {
                            td {
                                height: 120px;
                                .cell {
                                    img {
                                        width: 42%;
                                        height: 300px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        .loadtalbox{
          width: 32.5%;
          top: 95px;
          bottom: 10px;
          left: 16px;
        }
        .imgdialog .el-dialog{
          margin-bottom: 0;
        }
        .imgdialog .el-dialog__body{
          padding:5px 15px;
          height:calc(100vh - 120px);
          display:flex;
          flex-direction: column;
          align-items: center;
          justify-content:center;
        }
        .arcdialog.el-dialog__wrapper {
            position: absolute !important;
            overflow: visible;
            left: auto;
            right: auto;
            bottom: auto;
            .el-dialog {
                margin: 0!important;
                width: auto!important;
                border: 3px solid #2F9DF2;
                background:linear-gradient(left,rgba(2, 30, 65, .6),rgba(16, 97, 159, .6));
                background:-webkit-linear-gradient(left,rgba(2, 30, 65, .6),rgba(16, 97, 159, .6));
                background: -moz-linear-gradient(left,rgba(2, 30, 65, .6),rgba(16, 97, 159, .6));
                background: -o-linear-gradient(left,rgba(2, 30, 65, .6),rgba(16, 97, 159, .6));
                background: -ms-linear-gradient(left,rgba(2, 30, 65, .6),rgba(16, 97, 159, .6));
                .el-dialog__header {
                    background-color:rgba(16, 97, 159, .6);
                    color:#fff;
                    border-bottom: 3px solid #2F9DF2;
                    padding: 14px;
                    .el-dialog__title{
                      color: #fff;
                    }
                    .el-dialog__headerbtn {
                        top: 14px!important;
                      i{
                        font-size: 24px;
                        color: #00DBF3;
                      }
                    }
                    .el-select {
                        width: 120px;
                        .el-input__inner {
                            border: none;
                            background: none;
                            color: #0b90ca;
                            height: 20px;
                            line-height: 20px;
                            font-size: 14px;
                            padding-left: 0;
                        }
                        .el-input__suffix .el-input__icon {
                            line-height: 20px;
                        }
                    }
                }
                .el-dialog__body {
                    padding: 12px 12px 15px;
                    iframe{
                      border: none;
                      width: 480px;
                      height: 280px;
                      border: 3px solid #2F9DF2;
                    }
                    .el-table--border th, .el-table--border td{
                      border-right-color:#10619F!important;
                    }
                    .el-table th.is-leaf, .el-table td{
                      border-bottom-color:#10619F!important;
                    }
                    .el-table--enable-row-hover .el-table__body tr:hover > td{
                      background-color:rgba(16, 97, 159, .3);
                      cursor: pointer;
                    }

                    .el-table {
                      background: none;
                      &::before{
                        background-color:#2F9DF2;
                      }
                      &::after{
                        background-color:#2F9DF2;
                      }
                      &.el-table--group, &.el-table--border{
                        border-color:#2F9DF2;
                      }
                      .el-table__header-wrapper {
                          display: none;
                      }
                      .el-table__body-wrapper {
                          .el-table__body {
                              tr {
                                background:linear-gradient(left,rgba(2, 30, 65, .6),rgba(16, 97, 159, .6));
                                background:-webkit-linear-gradient(left,rgba(2, 30, 65, .6),rgba(16, 97, 159, .6));
                                background: -moz-linear-gradient(left,rgba(2, 30, 65, .6),rgba(16, 97, 159, .6));
                                background: -o-linear-gradient(left,rgba(2, 30, 65, .6),rgba(16, 97, 159, .6));
                                background: -ms-linear-gradient(left,rgba(2, 30, 65, .6),rgba(16, 97, 159, .6));
                                td{
                                  &:first-child {
                                    width: 100px;
                                    background: rgba(16, 97, 159, .5);
                                  }
                                  .cell{
                                    color: #fff;
                                    .el-button--text{
                                      color:#00DBF3;
                                    }
                                  }
                                }
                              }
                          }
                      }
                    }
                    .el-form {
                        width: 450px;
                        .el-form-item {
                            .el-input,
                            .el-select,
                            .el-textarea,
                            .el-cascader {
                                width: 100%;
                            }
                            .el-input--small .el-input__inner {
                                height: 38px;
                                line-height: 38px;
                            }
                            .imagebox {
                                width: 150px;
                                height: 150px;
                                background-color: #f3f3f3;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                flex-direction: column;
                                border-radius: 5px;
                                i {
                                    font-size: 30px;
                                    color: #999;
                                }
                                u {
                                    text-decoration: none;
                                    font-size: 15px;
                                    color: #999;
                                }
                            }
                            .el-image {
                                width: 150px;
                                height: 150px;
                                float: left;
                                border-radius: 5px;
                                box-shadow: 0 1px 3px 1px rgba(0, 0, 0, .1);
                                margin-right: 10px;
                                margin-bottom: 10px;
                            }
                        }
                    }
                }
            }
        }
        .arcdialog {
            width: auto;
            height: auto;
            margin: 0 !important;
            position: absolute;
            top: 80px;
            left: 300px!important;
        }
        .esri-view .esri-view-surface--inset-outline::after {
            outline: none !important
        }
        .redpage{
          .el-pager{
            li:not(.disabled).active{
              background-color: red!important;
            }
          }
          .el-pagination__sizes{
            .el-select{
              .el-input{
                &.is-focus .el-input__inner{
                  border-color: red;
                }
                .el-input__inner:hover{
                  border-color: red;
                }

              }
            }
          }
        }
        .doc_file{
          .el-upload.el-upload--text{
            width: 148px;
            height: 148px;
            line-height: 146px;
            float: left;
            border: 1px dashed #c0ccda;
            border-radius: 6px;
            &:hover{
              border-color:red;
            }
            .el-icon-plus{
              font-size:28px;
              color: #8c939d;
              &:hover{
                color: red;
              }
            }
          }
          .el-upload-list.el-upload-list--text{
            width: calc(100% - 300px);
            float:left;
            margin-left: 15px;
            li{
              &:first-child{
                margin-top: 0;
              }
            }
          }
        }
        .uploadimg{
          .el-upload--picture-card:hover{
            border-color:red;
          }
          .el-icon-plus:hover{
            color: red;
          }
        }
        .el-picker-panel.no-atTheMoment {
          .el-button--text.el-picker-panel__link-btn {
            display: none;
          }
        }
        .crop{
          .el-dialog__body{
            display: flex;
            flex-direction: column;
            align-items: center;
            height:620px;
            .scope-btn{
              margin-top: 10px;
            }
            .cropper-content {
              width: 100%;
              display: flex;
              flex:1;
              display: -webkit-flex;
              justify-content: flex-end;
              -webkit-justify-content: flex-end;
              .cropper {
                width:100%;
                height:100%;
                display: flex;
                flex: 1;
              }
            }
          }
        }
        * {
            box-sizing: border-box;
            outline: none !important;
            @include base-scrollbar;
        }
        /*a标签 */
        a {
            color: $base-color-blue;
            text-decoration: none;
        }
        /*图片 */
        img {
            object-fit: cover;
            &[src=''],
            &:not([src]) {
                opacity: 0;
            }
        }
        ul {
            li {
                list-style: none;
            }
        }
        /* vab-dropdown下拉动画 */
        .vab-dropdown {
            transition: $base-transition;
            &-active {
                transform: rotateZ(180deg);
            }
        }
        /* vab-dot圆点动画 */
        .vab-dot {
            position: relative;
            display: inline-block;
            width: 6px;
            height: 6px;
            margin-right: 3px;
            vertical-align: middle;
            border-radius: 50%;
            span {
                position: absolute;
                top: 0;
                left: 0;
                box-sizing: border-box;
                display: block;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                animation: vabDot 1.2s ease-in-out infinite;
                @keyframes vabDot {
                    0% {
                        opacity: 0.6;
                        transform: scale(0.8);
                    }
                    to {
                        opacity: 0;
                        transform: scale(2.4);
                    }
                }
            }
            &-success {
                background: $base-color-green;
                span {
                    background: $base-color-green;
                }
            }
            &-error {
                background: $base-color-red;
                span {
                    background: $base-color-red;
                }
            }
        }
        /* vab-data-empty占位图 */
        .vab-data-empty {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: calc(#{$base-keep-alive-height} - 250px);
            .el-image__inner {
                width: 22.5%;
            }
        }
        /* el-button按钮 */
        .el-button {
            [class*='ri'] {
                margin-right: 3px;
                font-size: 12px;
                vertical-align: -1.8px;
            }
            [class*='el-icon-']+span {
                margin-left: 3px;
            }
        }
        span+span,
        a+a,
        span+a {
            .el-button {
                margin-left: 10px;
            }
        }
        .el-drawer__wrapper {
            outline: none !important;
            * {
                outline: none !important;
            }
        }
        /* v-modal遮罩 */
        .v-modal {
            z-index: $base-z-index;
            background-color: rgba(0, 0, 0, 0.8);
            opacity: 0.8;
            backdrop-filter: blur(10px);
        }
        /* el-image-viewer遮罩 */
        .el-image-viewer__mask {
            background-color: rgba(0, 0, 0, 0.5);
            opacity: 0.6;
            backdrop-filter: blur(10px);
        }
        /* el-loading-mask遮罩 */
        .el-loading-mask {
            z-index: $base-z-index - 10 !important;
            &.is-fullscreen {
                z-index: $base-z-index + 99 !important;
            }
        }
        /* el-scrollbar滚动条 */
        .el-scrollbar {
            height: 100%;
            &__bar {
                z-index: 999;
            }
            &__thumb {
                background-color: rgba($base-menu-background, 0.1);
                &:hover {
                    background-color: rgba($base-menu-background, 0.2);
                }
            }
        }
        /* el-form表单 */
        .el-form--label-top {
            .el-form-item__label {
                padding: 0;
            }
        }
        .el-form-item__label {
            padding: 0 10px 0 0;
        }
        .el-range-editor--small {
            .el-range__icon,
            .el-range__close-icon {
                line-height: 23.5px;
            }
        }
        /*  el-badge */
        .el-badge__content {
            border: 0;
        }
        /* el-tag */
        .el-tag+.el-tag {
            margin-left: 10px;
        }
        /*  .el-page-header */
        .el-page-header {
            margin: 0 0 $base-margin 0;
        }
        /* el-alert */
        .el-alert {
            margin: 0 0 $base-margin 0;
            &--success.is-light {
                color: $base-color-green;
                background-color: mix($base-color-white, $base-color-green, 90%);
                border: 1px solid $base-color-green;
                i {
                    color: $base-color-green;
                }
            }
            &--info.is-light {
                color: $base-color-blue;
                background-color: mix($base-color-white, $base-color-blue, 90%);
                border: 1px solid $base-color-blue;
                i {
                    color: $base-color-blue;
                }
            }
            &--warning.is-light {
                color: $base-color-yellow;
                background-color: mix($base-color-white, $base-color-yellow, 90%);
                border: 1px solid $base-color-yellow;
                i {
                    color: $base-color-yellow;
                }
            }
            &--error.is-light {
                color: $base-color-red;
                background-color: mix($base-color-white, $base-color-red, 90%);
                border: 1px solid $base-color-red;
                i {
                    color: $base-color-red;
                }
            }
        }
        /* el-dropdown-menu */
        .el-dropdown-menu__item {
            [class*='ri-'] {
                margin-right: 0;
            }
        }
        /* markdown编辑器*/
        .editor-toolbar {
            .no-mobile,
            .fa-question-circle {
                display: none;
            }
        }
        /* el-divider间隔线 */
        .el-divider--horizontal {
            margin: 8px 0 $base-margin + 8px 0;
            .el-divider__text {
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }
        }
        /* nprogress进度条 */
        #nprogress {
            position: fixed;
            z-index: $base-z-index + 3;
            .bar {
                background: $base-color-blue;
            }
            .peg {
                box-shadow: 0 0 10px $base-color-blue, 0 0 5px $base-color-blue;
            }
        }
        /* el-table表格 */
        .el-table {
            .el-table__body-wrapper {
                @include base-scrollbar;
            }
            th {
                background: #f5f7fa;
            }
            td,
            th {
                position: relative;
                box-sizing: border-box;
                .cell {
                    font-size: $base-font-size-default;
                    font-weight: normal;
                    color: #606266;
                    .el-image {
                        width: 50px;
                        height: 50px;
                        border-radius: $base-border-radius;
                    }
                }
            }
        }
        /* el-pagination分页 */
        .el-pagination {
            margin: $base-margin 0 0 0;
            font-weight: normal;
            color: $base-color-black;
            text-align: center;
        }
        /* el-menu菜单开始 */
        .el-menu {
            user-select: none;
        }
        /* el-dialog、el-message-box、el-popover */
        @media (max-width: 576px) {
            .el-dialog,
            .el-message-box,
            .el-popover.el-popper {
                width: auto !important;
                margin: 5vw;
            }
        }
        /* el-card卡片 */
        .el-card {
            margin-bottom: $base-margin;
            &__body {
                padding: $base-padding;
            }
        }
        /* .vab-hey-message */
        .vab-hey-message {
            @mixin vab-hey-message {
                min-width: 246px;
                padding: 15px;
                background-color: $base-color-white;
                border-color: $base-color-white;
                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
                .el-message__content {
                    padding-right: $base-padding;
                    color: #34495e;
                }
                .el-icon-close {
                    color: #34495e;
                    &:hover {
                        opacity: 0.8;
                    }
                }
            }
            &-info {
                @include vab-hey-message;
                i {
                    color: $base-color-grey;
                }
            }
            &-success {
                @include vab-hey-message;
                i {
                    color: $base-color-green;
                }
            }
            &-warning {
                @include vab-hey-message;
                i {
                    color: $base-color-yellow;
                }
            }
            &-error {
                @include vab-hey-message;
                i {
                    color: $base-color-red;
                }
            }
        }
    }
}
